<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>后台-影票</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	 <div>

		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					搜索影票编号：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload" placeholder="请输入影票编号"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
					<div class="layui-inline">
    			 		<label class="layui-form-label" style="width:95px;">开场日期范围</label>
     			 		<div class="layui-input-inline" >
      			 			 <input type="text" class="layui-input" id="test6" autocomplete="off" >
     			 		</div>
     			 		<label style="margin-left:15px;">影票状态</label>
		     			<select class="layui-select" id="selstate" style="margin-left: 10px;">
							<option value="4">全部</option>
							<option value="0">待取票</option>
							<option value="1">已取票</option>
							<option value="2">已放映</option>
							<option value="3">已退票</option>
						</select>
   					 </div>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
		
	</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">还原显示状态</a>
</script>

	<script src="layui/layui.js"
		charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
	layui.use(['table', 'laydate'], function() {
		
			var laydate = layui.laydate;
			var table = layui.table;
			//日期范围
			laydate.render({
			   elem: '#test6'
			   ,range: true
			   ,done: function(value, date, endDate){
					//日期范围改变
				    var demoReload = $('#demoReload');
				    
				  	$.ajax({
				  		type:"GET",
				  		url:"odpage",
				  		data:{
				  			ticketid : demoReload.val(),
							seldate : value,
							selstatus : $("#selstate").val()
				  		},
				  		success:function(data){
				  			
							//执行重载
							table.reload('testReload', {
								page : {
									curr : 1
								//重新从第 1 页开始
								},
								where : { //检索的条件

									ticketid : demoReload.val(),
									seldate : $("#test6").val(),
									selstatus : $("#selstate").val()
								}
							});
							
				  		},
				  		dataType:"json"
				  	});
				  }
			});
			table.render({
				elem : '#test',
				url : 'tspage',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '影票表',
				cols : [ [  {
					field : 'ticketid',
					title : '影票编号',
					width : 200,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'orders.orderid',
					title : '订单编号',
					width : 200,
					templet : '<div>{{d.orders.orderid}}</div>'
				},{
					field : 'moviename',
					title : '电影名称',
					width : 200
				},{
					field : 'hallname',
					title : '影厅名称',
					width : 200
				},{
					field : 'playtime',
					title : '开场时间',
					width : 250,
					sort : true,
					templet : "<div>{{layui.util.toDateString(d.playtime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
				}, {
					field : 'orders.seat',
					title : '座位',
					width : 120,
					templet : '<div>{{d.orders.seat}}</div>'
				}, {
					field : 'orders.orderprice',
					title : '票价',
					width : 120,
					sort : true,
					templet : '<div>{{d.orders.orderprice}}</div>'
				}, {
					field : 'ticketstatus',
					title : '影票状态',
					width : 120,
					templet : function(res) {
						if(res.ticketstatus == 0){
							return "待取票";
						}else if(res.ticketstatus == 1){
							return "已取票";
						}else if(res.ticketstatus == 2){
							return "已放映";
						}else if(res.ticketstatus == 3){
							return "已退票";
						}
					}
					
				}, {
					field : 'ticketcondition',
					title : '影票显示状态',
					width : 150,
					templet : function(res) {
						return res.ticketcondition == 0 ? "隐藏" : "显示";
					}
				},{
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 120
				}] ],
				page : true,
				id : 'testReload'
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'edit') {
					layer.confirm('真的需要还原为显示状态吗？', function(index) {

						$.ajax({
							type : "POST", //提交方式
							url : "updtk", //地址和springmvc中控制器地址一致
							contentType:"application/json",
							data:JSON.stringify({
								 ticketid: data.ticketid,
						            orders: {
						                orderid: data.orders.orderid ,
						              	users: {
						              		userid:1
						              	}
						            },
						            ticketcondition: 1
							}),
							success : function(cm) {
								layer.msg(cm.msg, {
									time : 2000
								//两秒延迟
								}, function() {
									if (cm.msg == "修改成功") {

										//刷新页面
				                        window.location.reload();
				                        
									}

								});

							}
						});

					});
				} 
			});
			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件

							ticketid : demoReload.val(),
							seldate : $("#test6").val(),
							selstatus : $("#selstate").val() 
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});
			//影票状态改变
			$("#selstate").change(function(){
				var demoReload = $('#demoReload');
			    
			  	$.ajax({
			  		type:"GET",
			  		url:"odpage",
			  		data:{
			  			ticketid : demoReload.val(),
						seldate : $("#test6").val(),
						selstatus : $("#selstate").val()
			  		},
			  		success:function(data){
			  			
						//执行重载
						table.reload('testReload', {
							page : {
								curr : 1
							//重新从第 1 页开始
							},
							where : { //检索的条件

								ticketid : demoReload.val(),
								seldate : $("#test6").val(),
								selstatus : $("#selstate").val()
							}
						});
			  		},
			  		dataType:"json"
			  	});
			  	
			});


		});
		
		
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>

</body>
</html>